<template>
  <el-form ref="formRef" label-width="120px">
    <el-form-item label="模块类型">
      <el-radio-group v-model="form.svc_module_type" :disabled="currentData && currentData.svc_module_id">
        <el-radio :label="1">数据模块</el-radio>
        <el-radio :label="2">微接口模块</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="低码位置" prop="svc_module_store">
      <el-radio-group v-model="form.svc_module_store">
        <el-radio :label="1">文件低码</el-radio>
        <el-radio :label="2">在线低码</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="模块名称">
      <el-input v-model="form.svc_module_name" placeholder="名称，如：人员模块"></el-input>
    </el-form-item>
    <el-form-item label="模块编码">
      <el-input v-model="form.svc_module_code" placeholder="编码，如：AdminService，命名请使用全英文"></el-input>
    </el-form-item>
    <el-form-item label="数据主键" v-if="form.svc_module_type === 1">
      <el-input v-model="form.data_key" placeholder="模块数据主键, 默认不填为 _data_id"></el-input>
    </el-form-item>
    <el-form-item
      class="form-item-center"
      label="" label-width="0px" >
      <el-button
        size="large"
        type="primary"
        @click="handleSubmitCreateGroup"
      > 提交 </el-button>
      <el-button
        size="large"
        @click="handleCancel"
      > 取消 </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import _ from 'lodash';
import { api } from '@jzl/api';

const DEFAULT_FORM = {
  svc_module_uuid: '',
  svc_module_code: '',
  svc_module_name: '',
  svc_module_type: 1,
  svc_module_store: 1,
  data_key: '',
  service_id: '',
  app_id: -1,
}

const props = defineProps({
  actionType: String,
  currentData: Object,
  app: Object
});

const emit = defineEmits(['close']);

const form = reactive(_.cloneDeep(DEFAULT_FORM));
const loading = ref(false);
const rules = {
  svc_module_code: [
    { required: true, message: '请输入微服务模块编码', trigger: 'blur' }
  ],
  svc_module_name: [
    { required: true, message: '请输入微服务模块名称', trigger: 'blur' }
  ]
};

const init = () => {
  let formData = null;
  if (props.currentData && props.currentData.svc_module_id) {
    formData = _.cloneDeep(props.currentData);
  } else {
    formData = _.defaults({
      svc_module_uuid: $utils.getNanoid(),
      svc_module_code: '',
      svc_module_name: '',
      data_key: '',
      service_id: _.get(props.currentData, 'service_id', -1),
      app_id: _.get(props.app, 'id') || _.get(props.currentData, 'app_id')
    }, DEFAULT_FORM);
  }

  Object.assign(form, formData);
};

const handleSubmitCreateGroup = async () => {
  let data = _.cloneDeep(form);
  let id = _.get(data, 'svc_module_id');
  let ret = null;

  if (!data.svc_module_uuid) {
    data.svc_module_uuid = $utils.getNanoid();
  }

  if (id) {
    ret = await api.services.moduleUpdate(id, data);
  } else {
    ret = await api.services.moduleCreate(data);
  }

  let tid = _.get(form, 'tid') || `M_${_.get(ret, 'svc_module_id')}`;

  loading.value = false;

  if (ret) {
    $jui.toast('操作成功！');
    handleCancel(tid);
  }
};

const handleCancel = (tid) => {
  emit('close', tid);
};

onMounted(() => {
  init();
});

watch(() => props.currentData, () => {
  init();
}, { deep: true });

watch(() => props.app, () => {
  init();
}, { deep: true });

watch(() => props.actionType, () => {
  init();
});
</script>
